import { defineStore } from 'pinia'
import type { RouteLocationNormalized } from 'vue-router'
import { removeHtmlProperty, setHtmlProperty } from '@/utils'
import type { LayoutType } from '@/constants'
import { ASIDE_THEME } from '@/constants'

export interface Animation {
  label: string
  value: string
  enterActiveClass?: string
  leaveActiveClass?: string
}

export const useGlobalStore = defineStore('store-global', () => {
  const layout = ref<LayoutType>('vertical')
  const isCollapse = ref(false)
  const menuTheme = ref('light')
  const isDarkMenu = computed(() => menuTheme.value === 'dark')
  const animationName = ref('none')
  const animationList = ref<Animation[]>([{
    label: '无动画',
    value: 'none',
  }, {
    label: '渐显',
    value: 'fade',
  }, {
    label: '右滑渐显',
    value: 'fade-slide',
  }, {
    label: '下滑渐显',
    value: 'fade-bottom',
  }, {
    label: '上滑渐显',
    value: 'fade-top',
  }, {
    label: '缩放渐显',
    value: 'fade-zoom',
  }])

  // 菜单风格
  const settingsVisible = ref(false)
  function toggleMenu() {
    isCollapse.value = !isCollapse.value
  }
  // 打开偏好设置
  function openSettings() {
    settingsVisible.value = true
  }

  // 表格内容排布
  const tableTextAlign = ref('center')
  // 侧边栏反色
  watch(menuTheme, (val) => {
    Object.entries(ASIDE_THEME).forEach(([key, value]) => val === 'dark' ? setHtmlProperty(key, value) : removeHtmlProperty(key))
  }, { immediate: true })

  /** 保存上次路由 */
  const preRoute = ref()
  function setPreRoute(route: RouteLocationNormalized) {
    preRoute.value = route
  }

  return { layout, menuTheme, isDarkMenu, animationName, animationList, isCollapse, settingsVisible, toggleMenu, openSettings, setPreRoute, preRoute, tableTextAlign }
}, {
  persist: true,
})
// 根据传参设置修改 Store
export function setGlobalState(...args: any[]) {
  const globalStore = useGlobalStore()
  globalStore.$patch({ [args[0]]: args[1] })
}
